<template>
  <div class="more">
    <van-popup v-model="show" class="mypop">
      <van-cell-group v-if="report === false">
        <van-cell title="不感兴趣" icon="failure" @click="dislike" />
        <van-cell title="反馈辣鸡内容" @click="report =true" icon="warn-o" is-link />
        <van-cell title="拉黑作者" @click="blackUser" icon="delete" />
      </van-cell-group>
      <van-cell-group v-else>
        <van-cell icon="arrow-left" @click="report = false"></van-cell>
        <van-cell
          :title="item.name"
          v-for="(item, index) in reportType"
          :key="index"
          @click="reportClick(item.type)"
        ></van-cell>
      </van-cell-group>
      {{ artId }}
    </van-popup>
  </div>
</template>

<script>
import { dislikeArticle, reportArticle } from '@/api/article.js'
import { blacklistApi } from '@/api/user.js'

export default {
  props: ['artId', 'autId'],
  data () {
    return {
      show: false,
      report: false,
      // 反馈类型
      reportType: [
        { type: 0, name: '其他问题' },
        { type: 1, name: '标题夸张' },
        { type: 2, name: '低俗色情' },
        { type: 3, name: '错别字多' },
        { type: 4, name: '旧闻重复' },
        { type: 5, name: '广告软文' },
        { type: 6, name: '内容不实' },
        { type: 7, name: '涉嫌违法犯罪' },
        { type: 8, name: '侵权' }
      ]
    }
  },
  methods: {
    // 不感兴趣
    async dislike () {
      // 判断用户是否登录
      if (!this.$login()) {
        // 未登录
        return
      }
      // 删除点击的文章
      this.$emit('delDislike', this.artId)
      // 将信息提交给服务器(id数值超过js最大范围，造成精度丢失)
      await dislikeArticle(this.artId)
      // 提示用户
      this.$toast.success('已标记为不感兴趣')
      // 关闭面板
      this.show = false
    },

    // 反馈垃圾内容
    async reportClick (type) {
    // 判断用户是否登录
      if (!this.$login()) {
        // 未登录
        return
      }
      await reportArticle(this.artId, type)
      this.$toast.success('已收到您的反馈内容，尽快处理')
      this.report = false
      this.show = false
    },

    // 拉黑作者
    async blackUser () {
      // 判断用户是否登录
      if (!this.$login()) {
        // 未登录
        return
      }
      try {
        await blacklistApi(this.autId)
        this.$toast.success('已拉黑此用户')
        this.show = false
      } catch (err) {
        this.$toast.fail(err.message)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.mypop{
  width: 90%;
}
</style>
